<template>
  <div class="form">
    <el-form :model="form" ref="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="省份：">
            <el-cascader
              v-model="region_id"
              :options="regionList"
              :props="{children:'cities',value:'areaId',label:'areaName'}"
              style="width:100%"
              size="medium"
              @change="areaChange"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工厂名称：">
            <el-input v-model="form.factory_name" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工厂类型：">
           <el-select v-model="form.factory_type" placeholder="请选择">
              <el-option v-for="(data,index) in factory_type" :key="index" :label="data.type_name" :value="data.type_id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品类型：">
            <el-input v-model="form.goods_type" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品风格：">
            <el-select v-model="style_id" placeholder="请选择" multiple collapse-tags>
              <el-option v-for="(data,index) in styleList" :key="index" :label="data.style_name" :value="data.style_id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人：">
            <el-input v-model="form.contacts_name" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职位：">
            <el-input v-model="form.position" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话：">
            <el-input v-model="form.contacts_phone" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否已验厂：">
            <el-select v-model="form.is_check" placeholder="请选择">
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否有展厅：">
            <el-select v-model="form.is_hall" placeholder="请选择">
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否有产品图：">
            <el-select v-model="form.is_goods_img" placeholder="请选择">
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交期：">
            <el-input v-model="form.send_id" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址：">
            <el-input v-model="form.address" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="网址：">
            <el-input v-model="form.website_url" placeholder="请输入" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否已联系：">
            <el-select v-model="form.is_contact" placeholder="请选择">
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否已加微信：">
            <el-select v-model="form.is_join" placeholder="请选择">
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否已合作：">
            <el-select v-model="form.is_cooperation" placeholder="请选择">
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submit">{{factory_id?'确认修改':'确认添加'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    layerid: {
      type: String,
      default: ''
    },
    factory_type: {
      type: Array,
      default(){
        return []
      }
    },
    styleList: {
      type: Array,
      default(){
        return []
      }
    },
    factory_id: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      regionList: require('@/utils/city.json'),
      region_id: [],
      style_id: [],
      form: {
        province: '',
        city: '',
        area: '',
        address: '',
        factory_name: '',
        factory_type: '',
        goods_type: '',
        style_id: '',
        contacts_name: '',
        position: '',
        contacts_phone: '',
        is_check: '',
        is_hall: '',
        is_goods_img: '',
        send_id: '',
        website_url: '',
        is_contact: '',
        is_join: '',
        is_cooperation: ''
      }
    };
  },
  components: {},
  computed: {},
  mounted(){
    if(this.factory_id){
      this.init()
    }
  },
  methods: {
    init(){
      this.$http(this.$ApiList.ThirdFactoryInfo,{factory_id: this.factory_id}).then(res => {
        for(let i in this.form){
          this.form[i] = res.datas[i]
        }
        this.style_id = res.datas.style_id.split(',').map(Number)
        this.region_id = [res.datas.province,res.datas.city,res.datas.area]
      })
    },
    areaChange(e){
      this.form.province = e[0]
      this.form.city = e[1]
      this.form.area = e[2]
    },
    submit(){
      if(this.style_id.length){
        this.form.style_id = this.style_id.join(',')
      }else{
        this.form.style_id = ''
      }
      if(this.factory_id){
        this.form.factory_id = this.factory_id
        this.$http(this.$ApiList.UpdateThirdFactory,this.form).then(res => {
          this.$layer.close(this.layerid)
          this.$layer.msg('修改成功');
          this.$parent.init()
        })
      }else{
        this.$http(this.$ApiList.UpThirdFactory,this.form).then(res => {
          this.$layer.close(this.layerid)
          this.$layer.msg('添加成功');
          this.$parent.init()
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .form{
    padding: 20px 20px 0;
  }
</style>